<template>
  <view class="coupon-item" :class="{invalid: type === 1}" @click="onClickItem">
    <view class="top-icon"></view>
    <view class="bottom-icon"></view>
    <view class="content">
      <view class="left">
        <view class="top-box">
          <text class="title">{{item.coupon_name}}</text>
          <text class="time">有效期至 {{item.deadline}}</text>
        </view>
        <text class="coupon-type">支持全国门店使用</text>
      </view>
      <view class="status" v-if="type === 1"><text>{{item.status === 0 ? '已失效' : '已使用'}}</text></view>
      <view class="right">
        <text class="amount"><text class="b">{{item.cost_price | formatNum(this)}}</text>{{item.cost_price | formatUnit(this)}}</text>
        <text class="label" v-if="showDetailsText">查看详情</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  props: {
    showDetailsText: {
      type: Boolean,
      default: true
    },
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    type: {
      type: Number,
      default: 0
    }
  },
  created() {
    console.log(this.item)
  },
  filters: {
    // 格式化单位
    formatUnit(data, self) {
      if(!data) return ''
      let res = self.numberFormat(data)
      return res.unit
    },
    // 格式化金额
    formatNum(data, self) {
      if(!data) return ''
      let res = self.numberFormat(data)
      return res.value
    }
  },
  methods: {
    // 格式化金额
    numberFormat (value) {
      let param = {}
      let k = 10000
      let sizes = ['元', '万', '亿', '万亿']
      let i
      if(!value) return ''
      if(value < k) {
        param.value =value
        param.unit = '元'
      } else {
        i = Math.floor(Math.log(value) / Math.log(k))
        param.value = ((value / Math.pow(k, i))).toFixed(2)
        param.unit = sizes[i]
      }
      return param
    },
    onClickItem() {
      this.$emit('click', this.item)
    }
  }
}
</script>

<style lang="scss" scoped>
.coupon-item{
  margin: 40rpx 26rpx;
  position: relative;
  height: 216rpx; 
  background-color: #fff; 
  box-shadow: 0 0 10rpx 0 rgba(160, 160, 160, 0.35);
  border-radius: 10rpx;
  &:first-child{
    margin-top: 20rpx;
  }
  &::before{
    content: '';
    width: 0;
    height: 156rpx;
    position: absolute;
    right: 192rpx;
    top: 30rpx;
    border-left: 2rpx dashed #C7C7C7;
  }
  &::after{
    content: '';
    height: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 8rpx solid #FFD921;
    border-radius: 0 0 10rpx 10rpx;
    z-index: 1;
  }
  .top-icon::before, .bottom-icon::before { 
    position: absolute; 
    content: ''; 
    right: 172rpx; 
    width: 40rpx; 
    padding: 20rpx 0;
    border-radius: 50%;
    box-shadow: 0 0 10rpx 0 rgba(160, 160, 160, 0.35) inset;
    background-color: #f6f6f6; 
    z-index: 2;
  }
  .top-icon::before {
    top: -20rpx;
  } 
  .bottom-icon::before {
    bottom: -20rpx;
  }
  .top-icon::after, .bottom-icon::after { 
    position: absolute; 
    right: 172rpx; 
    content: ''; 
    height: 20rpx; 
    width: 40rpx; 
    background-color: #f5f5f5; 
    z-index: 3;
  } 
  .top-icon::after {
    top: -22rpx;
  } 
  .bottom-icon::after {
    bottom: -22rpx;
  }
  .content{
    height: 216rpx;
    display: flex;
    align-items: center;
    .left{
      flex: 1;
      padding: 30rpx 40rpx;
      height: 216rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top-box{
        display: flex;
        flex-direction: column;
        .title{
          font-size: 36rpx;
          color: #333;
        }
        .time{
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
        }
      }
      .coupon-type{
        font-size: 28rpx;
        color: #FF9813;
      }
    }
    .status{
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #999;
      margin-right: 50rpx;
    }
    .right{
      width: 192rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .amount{
        color: #F1635B;
        font-size: 28rpx;
        .b{
          font-weight: bold;
          font-size: 68rpx;
        }
      }
      .label{
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  &.invalid{
    &::after{
      content: '';
      height: 0;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      border-bottom: 8rpx solid #bbb;
      border-radius: 0 0 10rpx 10rpx;
      z-index: 1;
    }
    .content{
      .left{
        .top-box{
          .title{
            color: #999;
          }
        }
        .coupon-type{
          color: #999;
        }
      }
      .right{
        .amount{
          color: #999;
        }
      }
    }
  }
}
</style>
